<template>
  <div>
    <baidu-map>
      <bm-view class="bm-view" :center="center"></bm-view>
      <!-- 缩放控件 -->
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-navigation>
      <!-- 城市选择 -->
      <bm-city-list anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-city-list>
      <!-- 定位 -->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
      <!-- 缩略图 -->
      <!-- <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map> -->
      <!-- 全景 -->
      <!-- <bm-panorama></bm-panorama> -->
      <!-- 交通状态 -->
      <!-- <bm-traffic :predictDa
      te="{ weekday: 7, hour: 12 }"></bm-traffic> -->
      <van-search @cancel="$router.go(-1)" class="clear_fix" v-model="keyword" show-action label="地址" placeholder="请输入搜索关键词"></van-search>

      <!-- 搜索地区检索 -->
      <bm-local-search :keyword="keyword" :auto-viewport="true" :panel="false"></bm-local-search>

      <!-- 右击菜单 -->
      <!-- <bm-context-menu>
        <bm-context-menu-item :callback="gotoBeijing" text="去北京"></bm-context-menu-item>
        <bm-context-menu-item :callback="gotoShanghai" text="去上海"></bm-context-menu-item>
      </bm-context-menu> -->
    </baidu-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      center: '西安',
      zoom: 3,
      keyword: '百度',
      value: '',
    };
  },
  methods: {
    onSearch() {
    },
    gotoBeijing(e) {
      e.stopPropagation();

      this.center = {
        lng: 116.404,
        lat: 39.915,
      };
    },
    gotoShanghai(e) {
      e.stopPropagation();
      this.center = {
        lng: 121.473354,
        lat: 31.238413,
      };
    },
  },
};
</script>

<style scoped>
.bm-view {
  width: 100%;
  height: 100vh;
}
.van-search {
  position: fixed;
  top: 0 !important;
  left: 0 !important;
  z-index: 999 !important;
  width: 100%;
}
.bm-panorama {
  z-index: 1000 !important;
}
</style>
